<template>
	<view class="container">
		<view class="v-search">
			<uni-search-bar placeholder="输入产品名称" bgColor="#fff" clearButton="auto" @confirm="search"
				@cancel="clearSearch" @clear="clearSearch"/>
		</view>
		<view class="v-op">
			<view class="v-op-item-add" @click="add">新增</view>
		</view>
		<view class="v-products">
			<view class="v-product-item" v-for="(item, index) in datas.Products">
				<view class="v-product-item-left" @click="productClick(item)">
					<image class="v-product-item-image" :src="getServerPath(item.ImageUrl) " mode="aspectFill"></image>
				</view>
				<view class="v-product-item-right">
					<text class="v-product-item-title" @click="productClick(item)">{{ item.Title }}</text>
					<text class="v-product-item-originalprice">￥{{ item.OriginalPrice }}</text>
					<view class="v-product-item-group">
						<text class="v-product-item-price">￥{{ item.Price }}</text>
					</view>
					<view class="v-op-inner">
						<view class="v-op-item-edit" @click="edit(item)">
							<image src="../../static/edit.png" mode="aspectFit"></image>
							编辑
						</view>
						<view class="v-op-item-del" @click="del(item)">
							<image src="../../static/del.png" mode="aspectFit"></image>
							删除
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="datas.loadStatus"></uni-load-more>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
	export default {
		data() {
			return {
				messageText: '',
				msgType: 'success',
				duration: 2000,

				datas: {
					Products: [
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Price: '2889.36',
						// 	OriginalPrice: '3899.99',
						// 	BuyCount: 4,
						// 	CreateTime: '2024-04-05 12:23',
						// 	Source: 1 //1:平台自营 2:商家运营
						// },
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Price: '2889.36',
						// 	OriginalPrice: '3899.99',
						// 	BuyCount: 3,
						// 	CreateTime: '2024-04-05 12:23',
						// 	Source: 2 //1:平台自营 2:商家运营
						// }
					],
					queryContent: '',
					totalPage: 0,
					currentPage: 1,
					pageRow: 5,
					loadStatus: 'more'
				},
				curItem: null
			};
		},
		methods: {
			dialogConfirm() {
				console.log('点击确认')
				let _this = this;
				_this.del_Post();
			},
			dialogClose() {
				console.log('点击关闭')
			},
			getServerPath: function(url) {
				let _this = this;
				console.log(`${_this.sysInfo.ImageBasePath}${url}`);
				return `${_this.sysInfo.ImageBasePath}${url}`;
			},
			search(item) {
				console.log(item.value);
				let _this = this;
				this.datas.Products = [];
				_this.datas.queryContent = item.value;
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				_this.loadProducts();
			},
			clearSearch() {
				let _this = this;
				this.datas.Products = [];
				_this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				_this.loadProducts();
			},
			loadProducts: function() {
				console.log('loadProducts');

				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				var queryData = {
					PageSize: _this.datas.pageRow,
					PageIndex: _this.datas.currentPage,
					OrderState: _this.datas.OrderState,
					OrderType: _this.datas.TabIndex,
					QueryContent: _this.datas.queryContent
				};
				uni.request({
					url: _this.sysInfo.BasePath + 'Shop/GetProductDatas',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res)
							res.data.Data.Datas.forEach(item => {
								_this.datas.Products.push(item);
							})
							_this.datas.totalPage = res.data.Data.TotalPage;

						} else {
							_this.sysUtils.tip({
								sender: _this,
								title: '加载产品信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载产品信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
				uni.stopPullDownRefresh();
				if (_this.datas.currentPage >= _this.datas.totalPage) {
					_this.datas.loadStatus = 'noMore';
				} else {
					_this.datas.loadStatus = 'more';
				}
			},

			productClick: function(item) {
				console.log('productClick');
				let _this = this;
				uni.setStorage({
					key: 'CurrentProduct',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '/pages/store/product-detail'
						});
					}
				});
			},
			add: function() {
				console.log('add');
				let _this = this;
				uni.removeStorage({
					key:'CurrentProduct',
					success() {
						uni.navigateTo({
							url: '/pages/store/addedit-product'
						});
					}
				});
			},
			edit: function(item) {
				console.log('edit');
				let _this = this;
				if (item) {
					uni.setStorage({
						key: 'CurrentProduct',
						data: item,
						success: function() {
							uni.navigateTo({
								url: '/pages/store/addedit-product'
							});
						}
					});

				}
			},
			del: function(item) {
				console.log('del');
				let _this = this;
				_this.curItem = item;
				this.dialogMsg = `确定要删除产品吗？`
				this.$refs.alertDialog.open();
			},
			del_Post: function() {
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				var queryData = _this.curItem;
				uni.request({
					url: _this.sysInfo.BasePath + 'Shop/DelProduct',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res)
							this.datas.Products = [];
							// _this.datas.queryContent = '';
							_this.datas.currentPage = 1;
							_this.datas.totalPage = 0;
							_this.loadProducts();

						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '删除产品信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '删除产品信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
				_this.curItem = null;
			},
			init: function() {
				console.log('init');
				let _this = this;
				this.datas.Products = [];
				// _this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				_this.loadProducts();
			}
		},
		onReachBottom() {
			console.log('onReachBottom');
			let _this = this;


			if (_this.datas.currentPage >= _this.datas.totalPage) {
				_this.datas.loadState = 'noMore';
				return;
			} else {
				_this.datas.currentPage = _this.datas.currentPage + 1;
				_this.loadProducts();
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			let _this = this;
			this.datas.Products = [];
			// _this.datas.queryContent = '';
			_this.datas.currentPage = 1;
			_this.datas.totalPage = 0;
			_this.loadProducts();
		},
		onShow() {
			let _this = this;
			_this.init();
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
			// _this.init();
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		/* background-color: #f0f0f0; */
		padding-top: 110rpx;
	}

	.v-search {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		/* top: 0 !important; */
	}

	.uni-searchbar {
		flex: 1;
	}

	.v-search ::v-deep .uni-searchbar__box {
		border: solid 1px #ce4d0e;
		/* height:70rpx; */
	}

	.v-search ::v-deep uni-text {
		color: #ce4d0e !important;
	}

	.v-search ::v-deep .uni-input-placeholder {
		color: #ce4d0e50 !important;
	}

	.v-products {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 0 20rpx 20rpx 20rpx;
		box-sizing: border-box;
	}

	.v-product-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		margin-bottom: 20rpx;
		cursor: pointer;
		position: relative;
		box-shadow: 0rpx 5rpx 10rpx #999;
		background-color: #fff;
	}

	.v-product-item-left {
		display: flex;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
	}

	.v-product-item-image {
		width: 250rpx;
		height: 250rpx;
	}

	.v-product-item-right {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		color: #333;
		padding: 10rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 5rpx;
		flex: 1;
	}

	.v-product-item-title {
		font-size: 26rpx;
		flex: 1;
	}

	.v-product-item-originalprice {
		font-size: 26rpx;
		text-decoration: line-through;
		color: #999;
	}

	.v-product-item-group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}

	.v-product-item-price {
		font-size: 32rpx;
		color: #ff5343;
		font-weight: bold;
	}

	.v-op-inner {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 5rpx 0;
		border-top: solid 1px #f0f0f0;
		margin-top: 10rpx;
	}

	.v-op {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		height: 100rpx;
	}

	.v-op-item-add {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		width: 120rpx;
		color: #fff;
		background-color: #00a9f2;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.v-op-item-edit {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50rpx;
		width: 120rpx;
		color: #55b4e5;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.v-op-item-edit image {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}

	.v-op-item-del {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50rpx;
		width: 120rpx;
		color: #cd2f0e;
		font-size: 32rpx;
		border-radius: 50rpx;
	}

	.v-op-item-del image {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}
</style>